<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		yufadeApi,
		tijiaoYufaApi
	} from '/api/request.js';
	const props = defineProps({});
	onMounted(() => {});
	const platform = ref({});
	const goback = async () => {
		uni.navigateBack();
	};
	const query = ref({
		gk_id: '',
		id: '',
	});
	const list = ref(null);
	onLoad(async (e) => {
		query.value.id = e.id;
		query.value.gk_id = e.gk_id;
	});
	const getList = async () => {
		try {
			let res = await yufadeApi(query.value);
			list.value = res.data
		} catch (error) {
			console.log(error);
			//TODO handle the exception
		}
	}
	onShow(() => {
		platform.value = uni.getStorageSync('platform');
		uni.showLoading()
		getList().finally(() => {
			uni.hideLoading()
			console.log(list.value);
		})
	});
	const stautss = ref({
		id: '',
		num: 0
	})
	const play = (id) => {
		if (stautss.value.id == id) {
			if (stautss.value.num === 1) {
				stautss.value.num = 2;
			} else if (stautss.value.num === 2) {
				stautss.value.num = 3;
			} else {
				stautss.value.num = 1;
			}
			console.log(stautss.value);
		} else {
			stautss.value.id = id;
			stautss.value.num = 1;
		}
	};
	const returnClass = (id) => {
		if (id == stautss.value.id && stautss.value.num == 1) return 'active'
		if (id == stautss.value.id && stautss.value.num == 2) return 'default'
		if (id == stautss.value.id && stautss.value.num == 2) return 'kong'
	}
	const selectIndex = ref('')
	const changeSelect = (e) => {
		selectIndex.value = e;
	};
	const onclick = (e) => {
		let index = query.value.index * 5 + e.index;
		console.log(index);
	};
	const showVideo = () => {
		uni.navigateTo({
			url: `/pages/yufa/components/video?id=`
		})
	}
</script>

<template>
	<view class="wrap " :style="{
            height: platform.gaodu + 'rpx'
        }">
		<view class="header-wrap uni-row" :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }">
			<image class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
			<view class="title"> 语句题库 </view>
			<image class="left" src="/static/img/goback-black.png" mode="widthFix" style="opacity: 0;" />
		</view>
		<scroll-view scroll-y="true" class="body" :style="{ height: platform.gaodu - platform.dingbu - 96 + 'rpx' }">
			<view class="" style="height: 20rpx;" />
			<view class="item uni-row" v-for="(item,index) in list" :key="index" @click="play(item.id)"
				:class="returnClass(item.id)">
				<next-swipe-action :btnGroup="[]" :index="index" :select="selectIndex" @changeSelect="changeSelect">
					<view class="nei uni-row">
						<view class="title">
							{{item.title}}
						</view>
						<view class="titles">
							{{item.words}}
						</view>
						<view class="titless">
							{{item.description}}
						</view>
					</view>
				</next-swipe-action>
			</view>
			<view class="" style="height: 20rpx;" />
			<view class="nothing" v-if="list&&list.length<1">
				<image src="/static/img/nothing.png" class="img"></image>
				<view class="label"> 哎呀，这里什么内容都没有 </view>
			</view>
		</scroll-view>
	</view>

</template>

<style scoped lang="less">
	.wrap {
		background: url('/static/img/wolrd/bg.png');
		background-size: 100% 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 24rpx;

			.left {
				width: 48rpx;
			}

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				margin-left: 32rpx;
			}

			.leftsss {
				justify-content: center;
				width: 144rpx;
				height: 52rpx;
				font-size: 24rpx;
				color: #fff;
				background: #fa862c;
				border-radius: 8rpx;
			}

			.submit {
				font-size: 24rpx;
				color: #fff;
				background-color: #9561f3;
				justify-content: center;
				width: 144rpx;
				height: 52rpx;
				border-radius: 8rpx;
				margin-left: 32rpx;
			}
		}

		.body {
			padding: 0 28rpx;

			.item {
				align-items: center;
				height: 144rpx;
				background: #FFFFFF;
				margin-bottom: 16rpx;
				font-weight: 500;
				font-size: 32rpx;
				border-radius: 16rpx;
				overflow: hidden;

				.nei {
					padding: 0 28rpx;
					height: 144rpx;
				}

				.title {
					color: #B3B3B3;
				}

				.titles,
				.titless {
					display: none;
				}

				&.active {
					.title {
						display: none;
					}

					.titles {
						display: block;
					}
				}

				&.default {
					.title {
						display: none;
					}

					.title {
						display: none;
					}

					.titless {
						display: block;
					}
				}

				&:last-child {
					margin-bottom: 0;
				}

			}
		}
	}

	.wai {
		width: 606rpx;
		height: 378rpx;
		background: #f4eeff;
		border-radius: 64rpx;
		padding: 48rpx 96rpx;
		text-align: center;
		color: #333333;

		.title {
			font-size: 32rpx;
		}

		.label {
			font-size: 28rpx;
			margin: 36rpx 0 56rpx;
		}

		.footer {
			justify-content: space-between;

			.bt {
				width: 184rpx;
				height: 68rpx;
				font-size: 24rpx;
				line-height: 68rpx;
				border-radius: 36rpx;
			}

			.fou {
				color: #9561f3;
				border: 2rpx solid #9561f3;
			}

			.shi {
				background: #9561f3;
				color: #fff;
			}
		}
	}
</style>